<template>
  <div
    style="
      background: linear-gradient(to bottom, #fe7f2d, #ffc6a0, #f3f8fa);
      overflow: hidden;
      height: 100vh;
    "
  >
    <!-- 我的 -->
    <div
      style="
        margin-top: 10px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        height: 20px;
        line-height: 20px;
      "
    >
      我的
    </div>
    <div style="padding-left: 10px; padding-right: 10px">
      <!-- 头像和用户名 -->
       <template v-if="userInfo != null">
         <div style="display: flex; align-items: center">
          <van-image round width="3rem" height="3rem" src="./logo.webp" />
          <span style="font-size: 18px; font-weight: bold; margin-left: 10px">{{
            userInfo.username
          }}</span>
        </div>
      </template> 
      <template v-else>
        <div
          style="display: flex; align-items: center"
          @click="router.push('/login')"
        >
          <van-image
            round
            width="3rem"
            height="3rem"
            src="https://img2.baidu.com/it/u=3457961156,2781103929&fm=253&fmt=auto&app=138&f=JPEG?w=460&h=461"
          />
          <span style="color: gray; margin-left: 10px">请登录</span>
        </div>
      </template>
      <!-- 我的资产 -->
      <div class="card">
        <div class="title">我的资产</div>
        <div
          style="display: flex; justify-content: space-around"
          class="zichan"
        >
          <div>
            <div>0</div>
            <div>
              <van-icon name="bill-o" color="red" size="1.1em" />红包(元)
            </div>
          </div>
          <div>
            <div>0</div>
            <div>
              <van-icon name="balance-pay" color="orange" size="1.1em" />优惠券
            </div>
          </div>
          <div>
            <div>0</div>
            <div>
              <van-icon name="cash-o" color="gold" size="1.1em" />购物金(元)
            </div>
          </div>
        </div>
      </div>
      <!-- 我的订单 -->
      <div class="card">
        <div class="title">我的订单</div>
        <div class="order">
          <div>
            <div @click="url">
              <van-icon name="balance-pay" color="orange" size="2em" />
            </div>
            <div>待付款</div>
          </div>
          <div @click="url">
            <div><van-icon name="balance-pay" color="orange" size="2em" /></div>
            <div>备货中</div>
          </div>
          <div @click="url">
            <div><van-icon name="balance-pay" color="orange" size="2em" /></div>
            <div>待收货</div>
          </div>
          <div @click="url">
            <div><van-icon name="balance-pay" color="orange" size="2em" /></div>
            <div>待评价</div>
          </div>
        </div>
      </div>
      <!-- 常用工具 -->
      <div class="card">
        <div class="title">常用工具</div>
        <div class="order">
          <div @click="url">
            <div><van-icon name="balance-pay" color="orange" size="2em" /></div>
            <div>收获地址</div>
          </div>
          <div @click="url">
            <div><van-icon name="balance-pay" color="orange" size="2em" /></div>
            <div>我的评价</div>
          </div>
          <div @click="url">
            <div><van-icon name="balance-pay" color="orange" size="2em" /></div>
            <div>会员中心</div>
          </div>
          <div @click="url">
            <div><van-icon name="balance-pay" color="orange" size="2em" /></div>
            <div>体验反馈</div>
          </div>
          <div @click="url">
            <div><van-icon name="balance-pay" color="orange" size="2em" /></div>
            <div>商家资质</div>
          </div>
          <div @click="url">
            <div><van-icon name="balance-pay" color="orange" size="2em" /></div>
            <div>消消乐</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import req from '@/utils/req'
import { showToast } from 'vant'
import { showLoadingToast } from 'vant'
import { ref, onUnmounted, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useBottomStore } from '@/stores/buttom'
const router = useRouter()
const route = useRoute()
let userInfo:any = reactive(
  localStorage.getItem('userInfo')
    ? JSON.parse(localStorage.getItem('userInfo'))
    : null
)
const url = () => {
  showToast('暂未开放,敬请期待')
}
// setTimeout(() => {
if (!localStorage.getItem('token')) {
  showLoadingToast({
    forbidClick: true,
    loadingType: 'spinner',
    duration: 700,
    onClose: () => {
      // console.log(route);
      router.push('/register')
    }
  })
}
// }, 1000)

// 校验token 并获取用户个人信息
req
  .get('http://localhost:5000/api/v1/profile', {
    headers: {
      Authorization: localStorage.getItem('token')
        ? localStorage.getItem('token')
        : ''
    }
  })
  .then((res) => {
    console.log(res)
    if (res.data.code === 401) {
      showToast({
        message: '登录失效',
        duration: 1500,
        onClose: () => {
          router.push('/login')
        }
      })
    }
    else {
      userInfo = res.data.data
      localStorage.setItem('userInfo', JSON.stringify(res.data.data))
      localStorage.setItem('token', res.data.token)
    }
  })
</script>

<style scoped lang="scss">
.card {
  margin-top: 10px;

  background: white;
  border-radius: 10px;
  padding: 15px;
}
.zichan {
  margin-top: 10px;
  > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    > div:first-child {
      font-size: 1.5em;
      font-weight: bold;
    }
    > div:nth-child(2) {
      font-size: 0.9em;
    }
  }
}
.order {
  display: flex;
  flex-wrap: wrap;
  > div {
    margin-top: 10px;
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.7em;
    > div:nth-child(2) {
      margin-top: 10px;
    }
  }
}
.title {
  font-size: 0.9em;
  font-weight: bold;
}
</style>
